<template>
	<div class="container">
		<h3 style="margin-bottom:20px;">
			产品召回
		</h3>
		<el-form label-width="140px">
			<el-row>
				<el-col :span="10">
					<el-form-item label="产品名称：">
						<el-input placeholder="请输入内容" v-model="recalls.productName" style="width: 300px"></el-input>
					</el-form-item>
					<el-form-item label="批号：">
						<el-input placeholder="请输入内容" v-model="recalls.batchNo" style="width: 300px"></el-input>
					</el-form-item>
					<el-form-item label="企业：">
						<el-select v-model="name"  value-key="id" @change="getcompany" placeholder="" style="width:300px">
							<el-option v-for="item in listall" :key="item.id" :label="item.abbreviation" :value="item">{{item.abbreviation}}</el-option>
						</el-select>
					</el-form-item>

				</el-col>
				<el-col :span="12">
					<el-form-item label="召回范围：" >
					    <el-select style="width: 300px" v-model="recalls.traceStep">
					        <el-option
					            :label="item"
					            :value="item"
					            v-for="(item, index) in types"
					            :key="index"
					        ></el-option>
					    </el-select>
					</el-form-item>
					<el-form-item label="召回时间：">
						<el-date-picker style="width:300px;" v-model="recalls.recallDate" value-format="yyyy/MM/dd" type="date" placeholder="选择日期"> </el-date-picker>
					</el-form-item>
					<el-form-item label="召回图片：">
						<el-upload
							 list-type="picture-card"
							:action="action"
							:show-file-list="false"
							:headers="headers"
							:on-success="successFile"
							 name="files"
								>
			     <img v-if="recalls.prodImg" :src="showImg+recalls.prodImg" class="avatar">
                 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
			   </el-upload>
					</el-form-item>
				</el-col>
				<el-col>
					<el-form-item label-width="140px">
						召回原因及公告(该信息将显示在追溯扫码中)
					</el-form-item>
					<el-form-item label-width="140px">
					    <div ref="editor" style="width:80%;" ></div>
					</el-form-item>
				</el-col>
			</el-row>
			<el-form-item class="footerFixed" label-width="0px">
			    <el-button type="primary" @click="submitrule('ruleForm')">召回</el-button>
			    <el-button  @click="back">返回</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import axios from "axios"
	import { company_get_child,recall_add,recall_chain } from "@/request/supervisionCenterApi.js"
	import E from 'wangeditor';
	export default{
		data(){
			return{
				action: 'https://bbgy.cpzsyun.com:82/api/plant/file/upload',
				headers: {common:{
				token: JSON.parse(window.sessionStorage.getItem("token"))
				}},
				showImg:'https://bbgy.cpzsyun.com:82/api/plant/file/show/',
				ruleForm:{},
				name:'',
				listall:[],
				recalls:{
					prodImg:""
				},
				 types: ['种植','采收','初加工', '采购入库'],
				 chains:[]
			}
		},
		mounted(){
			var editor = new E(this.$refs.editor)
			editor.customConfig.uploadImgServer = this.$store.state.uploadImgurl +'/file/upload';
			editor.customConfig.uploadFileName = 'file';
			editor.customConfig.uploadImgHooks = {
			    customInsert: function (insertImg, result, editor) {

			        var url =  "http://" + window.location.host + "/file/show/" +  result.data
			        insertImg(url)

			    }
			}
			editor.customConfig.onchange = (html) => {
			    this.recalls.reason = html
			}
			editor.create();
			editor.txt.html(this.recalls.reason)

			this.init()
		},
		methods:{
			getcompany(ele){
				this.recalls.companyId = ele.id
				this.recalls.companyName = ele.abbreviation
			},
			back(){
				this.$router.go(-1)
			},
			init(){
				// 获取  企业
				company_get_child("").then((res)=>{
					this.listall = res.data
				})
			},
			successFile(res, file){
                console.log(res,file)
				this.recalls.prodImg = res.data.fileName
				console.log(this.recalls)
				},
			// 召回
			submitrule(){
				var traceStep = ""
				if(this.recalls.traceStep == "初加工"){
					traceStep = "processDetail"
				}else if(this.recalls.traceStep == "采购入库"){
					traceStep = "storageManage"
				}else if(this.recalls.traceStep == "种植"){
					traceStep = "plant"
				}else{
					traceStep = "reapDetail"
				}
				let data = {
					batchNo:this.recalls.batch,
					traceStep:traceStep
				}
				// axios.post("http://192.168.0.100:8880/plant/plant/recall/chain",data).then((res)=>{
				axios.post("https://bbgy.cpzsyun.com:82/api/plant/plant/recall/chain",data).then((res)=>{
					this.chains = res.data.data
					// console.log(this.chains)
					this.$confirm('请仔细核对所填信息，提交后该批产品全部召回，无法再次销售！', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						// this.loading = true
						let sdata = {
							recall:this.recalls,
							chains:this.chains
						}
						// console.log(data)
						// axios.post("http://192.168.0.100:8880/plant/plant/recall/add",sdata).then((res)=>{
						axios.post("https://bbgy.cpzsyun.com:82/api/plant/plant/recall/add",sdata).then((res)=>{
							this.$notify({
								title: '提示',
								message: '召回成功',
								type: 'success',
								duration:1000
							});
							this.$router.go(-1)
						})
					})
				})

			}
		}
	}
</script>

<style scoped>
.avatar{
	width: 147px;
	height: 147px;
}
</style>
